import { View, Text } from '@tarojs/components'
import { useDidShow } from '@tarojs/taro'
import './index.scss'
import Taro from '@tarojs/taro'
import request  from '../../utils/request'
import { useEffect, useState } from 'react';
import moment from 'moment'
import { AtCalendar } from "taro-ui"
import { AtButton } from 'taro-ui'
export default function Index (props) {
  const { info } = Taro.getCurrentInstance().router.params;
  const [detail,setDetail] = useState({});
  const [calendarData, setCalendarData] = useState({});
  const [currentDate, setCurrentDate] = useState(moment().format('YYYY-MM-DD'));
  const [seatId,setSeatId] = useState('');
  const [hasseats,setHasseats] = useState([]);
  const [userInfo,setUserInfo] = useState({nickname:''});

   const getUserInfo = ()=>{
    //admin/login
    request.get('app/get-login-user-info').then((res)=>{
      console.log(res);
      setUserInfo(res);
      Taro.setStorage({
          key:"userInfo",
          data:res
      })
      window.localStorage.setItem('userInfo',res)
    })
  }
  const getDetail = ()=>{
    //admin/login
    request.get('app/c/lesson/detail?courseId'+id).then((res)=>{
      setDetail(res||{} );
    })
  }
  const getRoom = (id)=>{
    //admin/login
    request.get('/app/c/room/detail?id='+id).then((res)=>{
      console.log(res);
      let allseats = res.seats || [];
      let nhasseats = [];
      allseats.forEach(seat=>{
        nhasseats.push(seat.seatNo);
      })
      setHasseats(nhasseats);
    })
  }
  useDidShow(() => {
    console.log(info)
    setDetail(JSON.parse(decodeURIComponent(info))||{} )
      getUserInfo();
   
  })
   const qz = () => {
    if(seatId==''){
      Taro.showToast({title:'请选择座位',icon:'none'});
      return;
    }
    request('/app/b/booking/seat', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      data: {
        "userId": userInfo.id,
        "scheduleId": detail.scheduleId,
        "bookingSeats": [
          {
            "studentId": userInfo.id,
            "seatId": seatId
          }
        ]
      }
    }).then((res) => {
      Taro.showToast({title:'预约成功',icon:'success'});

      Taro.navigateTo({url:'/pages/index/index'})
    })
  }
  useEffect(()=>{
    if(detail?.roomId){
       getRoom(detail.roomId);
    }
  },[detail])

  return (
    <div className='kc-detail-page'>
      <div className="course-item">
        <div className="course-title">{detail.lessonName}</div>
        <div className="course-brief">教室：{detail.roomName}</div>
        <div className="course-time">{moment(detail.lessonStartTime).format('YYYY-MM-DD HH:mm')} - {moment(detail.lessonEndTime).format('HH:mm')}</div>
      </div>
      
      <div style={{marginTop:'20px'}} className="course-item">

         <div className='zuoweibiao'>
            {
              ['A', 'B'].map((rowKey) => {
                return <div className='row' key={rowKey}>
                  {
                    ['01', '02', '03', '04', '05'].map((colKey) => {
                      const seatIdThis = rowKey + colKey;
                      const isSelected = seatId === seatIdThis;
                      let has =  hasseats.includes(seatIdThis);
                      return <div
                        key={colKey}
                        className={`seat ${has ? 'has' : 'nothas'} ${isSelected ? 'selected' : ''}`}
                        onClick={() => {
                          if (has) {
                            setSeatId(seatIdThis);
                          }
                        }}
                      >{seatIdThis}</div>
                    })
                  }

                </div>
              })}
          </div>
      </div>

      <AtButton type='primary' onClick={qz}>预约</AtButton>
    </div>

  )
}
